<template>
  <div id="app">
    <h2>App: {{ msg }}--{{ msg2 }}</h2>
    <Child v-model="msg" v-model:xxx="msg2"/>

    <!-- 
      vue3中: 
        v-model的本质: 动态的modelValue属性, update:modelValue事件
        可以指定自定义的属性名和事件名
          v-model:xxx : 动态的xxx属性, update:xxx事件
        可以使用多个v-model
        没有.sync了

     -->
    <Child 
      :modelValue="msg" 
      @update:modelValue="msg=$event"
      :xxx="msg2"
      @update:xxx="msg2=$event"
    />
    <!-- 


     -->
  </div>
</template>

<script lang="ts" setup>
import { ref } from 'vue';
import Child from './Child.vue'

const msg = ref('abc2')
const msg2 = ref('cba2')

</script>

